import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { List, Checkbox, Button, Modal, Form, Input } from "antd-mobile";
import { changeStatus, delUser,addUser,editUser } from "../../store/userSlice";
import { SwipeCell, Cell, Toast } from "react-vant";
import { Dialog } from "react-vant";
const Index = () => {
  const  [form]  = Form.useForm();
  const [visible, setVisible] = useState(false);
  let navigate = useNavigate();
  const dispatch = useDispatch();
  const initialState = useSelector((state) => state.userSlice);
  console.log(initialState);
  const onFinish = (values) => {
    setVisible(false);
    if(values.id){
      dispatch(editUser(values))
    }else{
      dispatch(addUser(values))
      
    }
    
  };
  return (
    <div>
      <div>
        <Button
          color="primary"
          fill="solid"
          onClick={() => {
            setVisible(true);
            form.resetFields()
          }}
        >
          添加乘车人
        </Button>
      </div>
      <div>
        {initialState.map((item, index) => {
          return (
            <SwipeCell
              key={index}
              rightAction={
                <>
                  <Button
                    square
                    type="danger"
                    onClick={() =>
                      Dialog.confirm({
                        title: "删除！",
                        message: "确定删除吗？",
                        onCancel: () => console.log("cancel"),
                        onConfirm: (index) => dispatch(delUser(index)),
                      })
                    }
                  >
                    删除
                  </Button>
                  <Button
                    square
                    type="primary"
                    onClick={() => {
                      setVisible(true);
                      form.setFieldsValue(item)
                    }}
                  >
                    编辑
                  </Button>
                </>
              }
            >
              <List.Item
                title={item.phone}
                description={item.cardid}
                extra={
                  <Checkbox
                    checked={item.status}
                    onChange={(val) => {
                      dispatch(changeStatus({ index, checked: val }));
                      navigate(-1);
                    }}
                  />
                }
                key={index}
              >
                {item.name}
              </List.Item>
            </SwipeCell>
          );
        })}
      </div>
      <Modal
        visible={visible}
        content={
          <Form
            form={form}
            layout="horizontal"
            onFinish={onFinish}
            footer={
              <Button block type="submit" color="primary" size="large">
                提交
              </Button>
            }
          >
            <Form.Item name="id" hidden>
              <Input/>
            </Form.Item>
            <Form.Item
              name="name"
              label="姓名"
              rules={[{ required: true, message: "姓名不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入姓名" />
            </Form.Item>
            <Form.Item
              name="phone"
              label="手机号"
              rules={[{ required: true, message: "手机号不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入手机号" />
            </Form.Item>
            <Form.Item
              name="cardid"
              label="身份证"
              rules={[{ required: true, message: "身份证不能为空" }]}
            >
              <Input onChange={console.log} placeholder="请输入身份证" />
            </Form.Item>
          </Form>
        }
        closeOnAction
        onClose={() => {
          setVisible(false);
        }}
      />
    </div>
  );
};

export default Index;
